<template>
  <div class="play_header">
    <div @click="$emit('hhhhh')">
      <svg
        t="1646823464533"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2029"
        width="30"
        height="30"
      >
        <path
          d="M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z"
          p-id="2030"
          fill="#FFFFFF"
        ></path>
      </svg>
    </div>

    <div class="sing_and_singer">
      <h4>{{ currentSong.name }}</h4>
      <span
        v-for="(item, index) in currentSong.song
          ? currentSong.song.artists
          : currentSong.ar"
        :key="index"
        >{{ item.name }}</span
      >
    </div>
    <div>
      <svg
        t="1646823587399"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3556"
        width="25"
        height="25"
      >
        <path
          d="M689.204911 758.831688c-32.140001 0-61.344137 12.792351-82.802868 33.547047L315.245847 570.153468c9.228175-16.916275 14.476713-36.301787 14.476713-56.891731 0-20.541849-5.222955-39.886429-14.410198-56.775074l295.333332-226.291886c20.992103 18.437931 48.490388 29.634948 78.559217 29.634948 65.722864 0 119.192659-53.469795 119.192659-119.192659 0-65.720817-53.469795-119.188566-119.192659-119.188566-65.720817 0-119.188566 53.467749-119.188566 119.188566 0 22.38687 6.208399 43.348274 16.98586 61.262272L292.934702 427.223175c-21.419845-20.524452-50.462299-33.154098-82.399685-33.154098-65.723887 0-119.193683 53.469795-119.193683 119.193683 0 65.720817 53.469795 119.188566 119.193683 119.188566 31.888268 0 60.890812-12.589736 82.301448-33.056883l291.325042 222.354204c-9.020444 16.769942-14.146185 35.933397-14.146185 56.271608 0 65.723887 53.467749 119.193683 119.188566 119.193683 65.722864 0 119.192659-53.469795 119.192659-119.193683C808.396547 812.299437 754.926752 758.831688 689.204911 758.831688zM689.204911 58.288544c45.409213 0 82.353636 36.942377 82.353636 82.349543 0 45.409213-36.944424 82.353636-82.353636 82.353636-45.407166 0-82.349543-36.944424-82.349543-82.353636C606.855368 95.229898 643.797745 58.288544 689.204911 58.288544zM210.535017 595.61128c-45.410236 0-82.35466-36.942377-82.35466-82.349543 0-45.410236 36.944424-82.35466 82.35466-82.35466 45.407166 0 82.34852 36.944424 82.34852 82.35466C292.883537 558.669926 255.942183 595.61128 210.535017 595.61128zM689.204911 960.373891c-45.407166 0-82.349543-36.944424-82.349543-82.35466 0-45.407166 36.942377-82.349543 82.349543-82.349543 45.409213 0 82.353636 36.942377 82.353636 82.349543C771.557524 923.43049 734.614124 960.373891 689.204911 960.373891z"
          p-id="3557"
          fill="#FFFFFF"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    currentSong: Object,
  },
};
</script>

<style lang="less">
.play_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 0;
  .sing_and_singer {
    text-align: center;
    h4 {
      margin: 0;
      font-weight: 300;
      color: #ffffff;
    }
    span {
      color: #ffffff;
      font-weight: 100;
      font-size: 12px;
    }
  }
}
</style>